<template>
  <div class="px-20 py-40">
    <p class="text-2xl font-bold">{{ $t("common.welcome") }}</p>
    <Form class="field" @submit="handleLogin">
      <Field
        type="tel"
        v-model="phone"
        name="patternPhone"
        placeholder="请输入手机号"
        clearable
        :rules="[{ pattern: patternPhone, message: '请填写正确的手机号' }]"
      >
        <template #left-icon>
          <svg-icon iconClass="phone" className="text-xl mr-5" />
        </template>
      </Field>
      <Field
        type="tel"
        v-model="code"
        placeholder="输入验证码"
        clearable
        :rules="[{ message: '请填写验证码' }]"
      >
        <template #left-icon>
          <svg-icon iconClass="shield" className="text-xl mr-5" />
        </template>
        <template #button>
          <Button
            size="small"
            type="primary"
            @click="handleSendCode"
            :disabled="lockSend"
            >发送验证码{{ lockSend ? `(${countDown})` : "" }}</Button
          >
        </template>
      </Field>
      <div class="mt-20">
        <Button round block color="#FF923A" native-type="submit">登陆</Button>
      </div>
    </Form>
    <div class="fixed bottom-40 left-20 right-20">
      <img :src="img" alt="图片" />
    </div>
  </div>
</template>

<script>
import { getSmsChannels, login, sendVerifCode } from "@/api/login";
import { checkPlatform } from "@/utils/helper";
import { setLocalStore } from "@/config/global";
import { Form, Field, Button } from "vant";
export default {
  name: "Login-2",
  components: { Form, Field, Button },
  data() {
    return {
      phone: "",
      code: "",
      countDown: 60,
      lockSend: false, // 禁用验证码按钮
      patternPhone: /^8\d{8,19}$/,
      img: require("@/assets/user/afpi.png"),
    };
  },
  created() {
    this.smsCount = 0;
    getSmsChannels().then((res) => {
      this.smsChannels = res.smsChannels;
    });
  },
  methods: {
    handleSendCode() {
      const index = this.smsCount % this.smsChannels.length;
      const channel = this.smsChannels[index];
      const params = {
        mobilePhone: this.phone,
        event: "default_verification",
        sender: channel,
      };
      if (channel === "nxsms") {
        this.$dialog.alert({
          message: "我们会以电话的形式告知您验证码，请注意接听",
          confirmButtonText: "知道了",
        });
      }
      this.smsCount += 1;
      sendVerifCode(params).then((res) => {
        this.startDown();
        this.verificationCode = res;
      });
    },
    startDown() {
      this.lockSend = true;
      this.forbidToRef = setInterval(() => {
        this.countDown = this.countDown - 1;
        if (this.countDown == 0) {
          clearInterval(this.forbidToRef);
          this.lockSend = false;
        }
      }, 1000);
    },
    handleLogin() {
      if (!this.code) {
        return;
      }
      const phoneInfo = checkPlatform();
      const params = {
        mobilePhone: this.phone,
        verificationCode: this.code,
        sequenceId: this.verificationCode,
        deviceInfo: {
          platform: "h5",
          appChannel: "kredito",
          appSystemVersion: phoneInfo.appSystemVersion,
          deviceModel: "N/A",
          deviceId: "N/A",
          appVersion: "N/A",
          appSystem: phoneInfo.appSystem,
        },
      };
      // const phone = this.$encrypt('8888888888')
      login(params).then((res) => {
        setLocalStore("refactor-misc-token", res.token);
        location.href = "home.html";
      });
    },
  },
};
</script>

<style lang="less" scoped>
.field {
  margin: 60px 0 20px 0;
}
</style>
